<template>
    <div style="height: 100%; width: 100%">
        <div class="main-content">
            <div class="top-header">
                <img src="@/assets/logo_blue.svg" alt="" />
                <span>及时通货运管理系统</span>
            </div>
            <!-- <img
              style="position: absolute; top: 5%; left: 5%; width: 150px"
              src="@/assets/LOGO_W.svg" /> -->
            <!-- <div class="info">
          <div>
            <div class="title">及时通货代系统</div>
            <div class="sub-title">专为中小型货代提供智能操作系统</div>
            <div class="extra">让你管理物流超有效率！</div>
          </div>
        </div> -->
            <div class="mid-content">
                <div class="swiper-container">
                    <div class="swiper-title">新一代智能操作系统</div>
                    <el-carousel indicator-position="outside" arrow="never" :autoplay="true">
                        <el-carousel-item v-for="item in imageList" :key="item">
                            <img :src="getImgUrl(item.img)" alt="" />
                            <div class="swiper-content-title">{{ item.title }}</div>
                            <div class="swiper-content">{{ item.text }}</div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="login-box">
                    <div class="title" style="margin: 0px 0 36px 0">账号登录</div>
                    <UserLogin
                        hideRegister
                        @success="successEvent"
                        :ref="(v) => (loginRef = v)"></UserLogin>
                </div>
            </div>
            <div class="technical-ownership">Copyright © 2024 宁波及时通物流科技有限公司</div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from 'vue'
import UserLogin from '@/components/login/UserLogin.vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import request from '@/public/request'
import { ElLoading } from 'element-plus'
import image1 from '@/assets/swiperImg/swiper-1.png';
import image2 from '@/assets/swiperImg/swiper-2.png';
import image3 from '@/assets/swiperImg/swiper-3.png';

const store = useStore()
const router = useRouter()
const loginRef = ref(null)

const imageList = reactive([
    {
        img:image1,
        title: '整合港区数据，全程可视数据',
        text: '海港EDI数据联通，节点信息实时传输；码头动态箱信息一件查询，掌握货物动向。',
    },
    {
        img: image2,
        title: '提供运价资源，方便在线甄选',
        text: '精选宁波口岸一级订舱代理，覆盖30+船东，全球30多条航线，共1W+条细分运价；实时更新订舱价格动态随时精准了解行业价格变化',
    },
    {
        img: image3,
        title: '连接订舱货代，实现订舱协同',
        text: '一键生成拖书转为货代系统订单，并直通合作上游，一步解决报价、制单和录单问题，让您聚焦于更有价值的事物上。',
    },
])

// 定义获取图片路径的方法，使用 new URL() 构造函数生成图片的绝对路径
const getImgUrl = (url) => {
    return url;
}

const loginTitle = computed(() => {
    if (loginRef.value) {
        return loginRef.value.title
    }
})

async function successEvent() {
    // 如果有后台账号直接登录后台
    const loading = ElLoading.service({ lock: true })
    try {
        router.push('/internal')
    } catch {
    } finally {
        loading.close()
    }
}

onMounted(() => {
    if (localStorage.getItem('jst:token') && localStorage.getItem('jst:token') != '') {
        router.push('/internal')
    }
})
</script>

<style lang="scss" scoped>
.main-content {
    height: 100%;
    width: 100%;
    //background-image: url('@/assets/newBg.png');
    background-image: url('@/assets/login_bj.png');
    background-repeat: no-repeat;
    background-position: center; /* 可选，使背景图片居中 */
    background-size: cover;
    // margin-top: 110px;
    // display: flex;
    // justify-content: space-around;
    // align-items: center; /* 垂直居中 */
    // .info {
    //     height: auto;
    //     width: auto;
    //     display: flex;
    //     // .title {
    //     //     font-size: 70px;
    //     //     font-weight: bold;
    //     //     font-style: italic;
    //     //     color: #ffffff;
    //     //     letter-spacing: 0;
    //     //     // text-align: center;
    //     //     // text-align: left;
    //     //     margin: auto;
    //     //     // margin-top: 180px;
    //     //     // margin-left: 200px;
    //     // }
    //     .sub-title {
    //         font-size: 50px;
    //         font-weight: bold;
    //         font-style: italic;
    //         color: #e5e5e7;
    //         letter-spacing: 0;
    //         text-align: left;
    //         margin-top: 40px;
    //         // margin-left: 200px;
    //     }
    //     .extra {
    //         font-size: 30px;
    //         // margin-left: 200px;
    //         margin-top: 180px;
    //         color: #ffffff;
    //     }
    // }
    .top-header {
        background: #ffffff;
        box-shadow: 0px 4px 16px 0px #00000014;
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left: 32px;
        display: flex;
        align-items: center;
        img {
            height: 32px;
            margin-right: 8px;
        }
        span {
            color: #000000d8;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 14px;
            line-height: 22px;
            letter-spacing: 0px;
            text-align: left;
        }
    }

    .mid-content {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        margin-top: 152px;

        .swiper-container {
            width: 418px;
            height: 564px;

            .swiper-title {
                color: #000000d8;
                font-family: AlibabaPuHuiTi2;
                font-weight: 900;
                font-size: 36px;
                line-height: 52px;
                letter-spacing: 0px;
                text-align: center;
                margin-top: 26px;
                margin-bottom: 28px;
            }
            img {
                margin-bottom: 12px;
                height: 231px;
                width: 100%;
            }

            .swiper-content-title {
                color: #000000d8;
                font-family: AlibabaPuHuiTi2;
                font-weight: 400;
                font-size: 14px;
                line-height: 22px;
                letter-spacing: 0px;
                text-align: left;
            }
            .swiper-content {
                color: #00000099;
                font-family: AlibabaPuHuiTi2;
                font-weight: 300;
                font-size: 12px;
                line-height: 20px;
                letter-spacing: 0px;
                text-align: left;
            }
        }
    }

    .login-box {
        width: 416px;
        height: 478px;
        background-color: #fff;
        // padding: 24px 55px 32px 55px;
        padding: 32px;
        // margin: 12%  10% 10% 10%;
        // margin-left: 10%;
        // margin-bottom: 20%;
        margin-left: 198px;
        border: 1px solid #e4e7ed;
        border-radius: 6px;
        position: relative;

        .title {
            font-weight: bold;
            color: #3c4144;
            text-align: center;
            margin-bottom: 40px;
            color: #000000d8;
            font-family: PingFang SC;
            font-size: 24px;
            line-height: 32px;
            letter-spacing: 0px;
        }
    }

    .technical-ownership {
        width: 100%;
        margin-top: 108px;
        color: #00000042;
        font-family: PingFang SC;
        font-weight: regular;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: center;
    }
}

:deep(.el-carousel__indicators--outside) {
    margin-top: 20px;
}

:deep(.el-carousel__item) {
    height: auto;
}

:deep(.el-carousel__indicators--outside button) {
    border-radius: 4px;
    background: #d9dbdf;
    width: 8px;
    height: 6px;
}

:deep(.el-carousel__indicator.is-active button) {
    width: 16px;
    height: 6px;
    border-radius: 8px;
    background: #9fa2ad;
}
</style>
